<!--  -->
<template>
    <div class="box">
        <div class="top">
            <p class="title">热门景区排行</p>
            <p class="bg"></p>
        </div>
        <div class="rankBg">
            <span>排名</span>
            <span class="ml-6">景区</span>
            <span class="ml-40">预约数量</span>

        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from "echarts"


const charts = ref()
// const  colorArray =  [
//         {
//             top: '#1ace4a', //绿
//             bottom: 'rgba(11,42,84, 0.3)',
//         },
//         {
//             top: '#F0E1C2', //粉
//             bottom: 'rgba(11,42,84,.3)',
//         }, {
//             top: 'yellow', //黄
//             bottom: 'rgba(11,42,84,.3)',
//         },
//         {
//             top: '#4f9aff', //深蓝
//             bottom: 'rgba(11,42,84,.3)',
//         }
//     ];

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    
    mycharts.setOption({
        tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      show:false,
      type: 'value',
    },
    grid:{
      left:'25%',
      top:'8%',
      bottom:"18%"
    },
    yAxis: {
      type: 'category', // 横向需要把yAxis的type设置为category
      inverse: true, // 反转
      axisLine: {
        show: false // 底部横线
      },
      axisTick:{
        show:false // 底部刻度线
      },
      axisLabel:{
        color:"#fff",
        formatter: (params:any, index:number) => {
          if(index>5) return [`${params}`] // 只设置前三名
          return [`{a${index + 1}|No.${index+1}}    ${params}`].join('\n')
        },
        rich: {
          a1: {
            color:"#FFC300",
            width: 20, // 序号元素宽
            height: 20, // 序号元素高
            fontSize:14
          },
          a2: {
            color:"#FF8F1F",
            width: 20, // 序号元素宽
            height: 20, // 序号元素高
            fontSize:14
          },
          a3: {
            color:"#EE1212",
            width: 20, // 序号元素宽
            height: 20, // 序号元素高
            fontSize:14
          },
        },
      },
      data:['峨眉山','稻城亚丁','九寨沟','万里长城','北京故宫'],
    },
    series: [
      {
        name: '订单',
        type: 'bar',
        stack: 'Total',
        data: [800,700,600,500,400,500],
        barWidth:'40%',
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
          formatter:'{c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
          color:"#fff",               //文字颜色
            fontStyle:"normal",         //italic斜体  oblique倾斜
            fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
            fontSize:12,                  //字体大小
        },
      }
    ]

})
// mycharts.setOption({
//   backgroundColor:'#011C2F',
//         tooltip: {
//           show: true,
//           formatter: "{b}:{c}",
//         },
//         grid: {
//           left: "5%",
//           top: "5%",
//           right: "8%",
//           bottom: "8%",
//           containLabel: true,
//         },

//         xAxis: {
//           type: "value",
//           show: false,
//           position: "top",
//           axisTick: {
//             show: false,
//           },
//           axisLine: {
//             show: false,
//             lineStyle: {
//               color: "#fff",
//             },
//           },
//           splitLine: {
//             show: false,
//           },
//         },
//         yAxis: [
//           {
//             type: "category",
//             axisTick: {
//               show: false,
//               alignWithLabel: false,
//               length: 5,
//             },
//             splitLine: {
//               //网格线
//               show: false,
//             },
//             inverse: "true", //排序
//             axisLine: {
//               show: false,
//               lineStyle: {
//                 color: "#fff",
//               },
//             },
//             data:  ["正常", "过载", "重载", "轻载"],
//           },
//         ],
//         series: [
//           {
//             name: "能耗值",
//             type: "bar",
//         barMaxWidth: 20,

//             label: {
//               normal: {
//                 show: true,
//                 position: "right",
//                 formatter: "{c}",
//                 textStyle: {
//                   color: "white", //color of value
//                 },
//               },
//             },
//             itemStyle: {
//               normal: {
//                 show: true,
//                 color: function (params) {
//                   let num = colorArray.length;
//                   return {
//                     type: "linear",
//                     colorStops: [
//                       {
//                         offset: 0,
//                         color: colorArray[params.dataIndex % num].bottom,
//                       },
//                       {
//                         offset: 1,
//                         color: colorArray[params.dataIndex % num].top,
//                       },
//                       {
//                         offset: 0,
//                         color: colorArray[params.dataIndex % num].bottom,
//                       },
//                       {
//                         offset: 1,
//                         color: colorArray[params.dataIndex % num].top,
//                       },
//                       {
//                         offset: 0,
//                         color: colorArray[params.dataIndex % num].bottom,
//                       },
//                       {
//                         offset: 1,
//                         color: colorArray[params.dataIndex % num].top,
//                       },
//                     ],
//                     //globalCoord: false
//                   };
//                 },
//                 barBorderRadius: 70,
//                 borderWidth: 0,
//                 borderColor: "#333",
//               },
//             },
//             barGap: "0%",
//             barCategoryGap: "50%",
//             data: [60, 132, 89, 134],
//           },
//         ],
// })
})
</script>

<style lang="scss" scoped>
.box {
    background: url(../../images//dataScreen-main-rt.png) no-repeat;
    background-size: 100% 100%;

    .top {
        .title {
            color: #ffffff;
            font-size: 16px;
            font-style: italic;
        }

        .bg {
            width: 68px;
            height: 7px;
            margin-top: 10px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
        }

    }

    .rankBg{
        margin: auto;
        margin-top: 40px;
        width: 90%;
        height: 36px;
        line-height: 35px;
        padding: 0px 10px;
        background: url(../../images/rankingChart-bg.png) no-repeat;
        background-size: 100% 100%;

        span{
            font-size: 16px;
            color: #FDBC52;
        }
    }

    .charts {
        width: 100%;
        height: 250px
    }
}
</style>